//todo —— 事件里有event对象
class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      door: 'open'
    }
    //todo —— 绑定事件得bind
    // this.handleClick = this.handleClick.bind(this)
    
  }
  
  // 和bind 二选一
  //? 给事件绑定的函数传递参数
  
  handleClick = (id,e) => {
    // e.target
    console.log(id, e)

    this.setState({
      door:'close'
    })
  }

  render() {
    const {door} = this.state

    return (
      // <h1 className='app' onClick={this.handleClick}>{door}事件绑定</h1>

      // todo 方式一：影响性能不推荐
      //! () => {this.handleClick()} 这种绑定方式render时候onClick都会生成一个新的函数，影响性能
      // <h1 className='app' onClick={(e) => {this.handleClick('id 1', e)}}>{door}事件绑定</h1>
      
      // todo 方式二：推荐
      //! 在事件绑定时，需要传多余参数，推荐通过bind方式
      <h1 onClick={this.handleClick.bind(this,'id 1')}>{door}事件绑定</h1>
    )
  }
}

ReactDom.render(<App />, document.getElementById("root"))